<!--
 * 选择店铺
-->
<template>
  <el-dialog :visible.sync="dialogVisible" title="指定门店" width="60%" @opened="open" @close="close">
    <div class="search-wrapper">
      <el-input class="search-wrapper__input" v-model="formShop.shopName" placeholder="请输入门店名称" />
      <el-input class="search-wrapper__input" v-model="formShop.baseName" placeholder="请输入营销区域名称" />
      <!-- <el-select class="search-wrapper__input" v-model="formShop.baseCode" placeholder="请选择营销区域" clearable>
        <el-option v-for="item in rentalPayWay" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select> -->
      <el-button @click="search()" size="mini" type="primary" icon="el-icon-search">查询</el-button>
      <el-button @click="kong()" size="mini" type="success" plain icon="el-icon-delete">清空</el-button>
    </div>

    <el-table :data="couponShopList" @selection-change="couponShopChecked" v-loading="loading" border height="400px"
      ref="shopTableRef" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" row-key="uuid">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="storeName" label="店铺名称" width="180" header-align="center"></el-table-column>
      <el-table-column prop="storeOwnerName" label="店主姓名" width="100" header-align="center"></el-table-column>
      <el-table-column prop="storeType" label="店铺类型" width="100" header-align="center">
        <template slot-scope="scope">
          <template v-for="item in storeType">
            <span v-if="scope.row.storeType == item.value" :key="item.value">{{ item.label }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="authCode" label="店铺授权码" width="100" header-align="center"></el-table-column>
      <el-table-column prop="baseName" label="营销区域" width="100" header-align="center"></el-table-column>
      <el-table-column label="店铺地址" header-align="center">
        <template slot-scope="scope">
          {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.county }}{{ scope.row.storeAddressDetail }}
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top:5px;">
      <el-pagination @size-change="handleSizeChangeShop" @current-change="handleCurrentChangeShop"
        :page-sizes="[10, 20, 30, 50, 100, 200]" :current-page="listQuery.current" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="shopConfirm()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  queryStoreInfo,
  queryCouponById,
  couponAttach
} from '@/api/promotionProgramEdit';
import { getAllBase, qryStore } from '@/api/addShopapply.js';
import { dict } from '../../../dict';
export default {
  name: "SelectStoreDialog",
  props: {
    show: { type: Boolean, default: false },
    uuid: { type: String, default: '' },
  },
  data() {
    return {
      formShop: {
        upOrgSeq: '',
        shopName: '',
        baseCode: ''
      },
      rentalPayWay: [],
      couponShopList: [],
      tableData: [],
      loading: false,
      total: 0,
      listQuery: {
        current: 1,
        size: 10,
      },
      detail: {},
      checkedShops: [],
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    },
    storeType: () => dict.storeType
  },
  created() {
    const logininfo = localStorage.getItem('logininfo');
    const orgSeq = JSON.parse(logininfo).orgSeq || JSON.parse(logininfo).orgList[0].orgSeq;
    this.formShop.upOrgSeq = orgSeq;
  },
  methods: {
    search() {
      this.listQuery.current = 1;
      this.getList();
    },
    kong() {
      this.formShop.shopName = '';
    },
    open() {
      this.formShop.shopName = '';
      this.checkedShops = [];
      this.listQuery.current = 1;
      // 获取详情
      if (this.uuid) {
        queryCouponById(this.uuid).then(res => {
          this.detail = res.result;
          if (res.result.storeDTOS && res.result.storeDTOS.length > 0) {
            this.checkedShops = res.result.storeDTOS;
          }
          this.getList();
          this.getBaseList();
        })
      }
    },
    getList() {
      const data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          orgSeq: this.formShop.upOrgSeq,
          storeName: this.formShop.shopName,
          baseName: this.formShop.baseName
        },
        ascs: [],
        descs: [],
      }
      this.loading = true;
      qryStore(data).then(res => {
        this.couponShopList = res.records;
        this.total = res.total;

        this.getDetail();
      }).finally(() => {
        this.loading = false;
      })
    },
    getBaseList() {
      getAllBase({
        code: this.formShop.upOrgSeq,
      }).then(res => {
        this.rentalPayWay = res.result;
      })
    },
    getDetail() {
      this.$nextTick(() => {
        this.checkedShops.forEach(item => {
          const curItem = this.couponShopList.find(o => o.orgSeq === item.orgSeq);
          curItem && this.$refs.shopTableRef.toggleRowSelection(curItem, true);
        })
      })
    },
    handleSizeChangeShop(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChangeShop(val) {
      this.listQuery.current = val;
      this.getList();
    },

    shopConfirm() {
      const data = {
        couponId: this.detail.uuid,
        upOrgSeq: this.formShop.upOrgSeq,
        orgSeqList: this.checkedShops.map(item => item.orgSeq),
      }
      couponAttach({
        ...data,
      }).then(res => {
        if (res.code == 1) {
          this.$message.success(res.message);
          this.dialogVisible = false;
          this.$emit('refresh');
        } else {
          this.$message.error(res.message);
        }
      })
    },

    couponShopChecked(row = []) {
      const checkedOrgArr = [...this.checkedShops, ...row];
      const checkedArr = Array.from(
        new Map(checkedOrgArr.map(item => [item.orgSeq, item])).values()
      );
      this.checkedShops = checkedArr.map(item => {
        return {
          authCode: item.authCode,
          baseName: item.baseName,
          orgSeq: item.orgSeq,
          merid: item.merid,
          storeName: item.storeName,
          storePhone: item.storePhone,
          storeType: item.storeType,
          uuid: item.uuid,
          zqOrgName: item.zqOrgName,
          zqOrgSeq: item.zqOrgSeq
        }
      });
    },

    close() {
      this.checkedShops = [];
      this.couponShopList = [];
    }
  }
}
</script>

<style lang="less" scoped>
.search-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  &__input {
    width: 200px;
    margin-right: 15px;
  }
}
</style>